<template>
  <div>
    <el-table
      v-if="maxHeight"
      ref="multipleTable"
      v-loading="loading"
      :data="tableData"
      class="table"
      header-row-class-name="header-row-class-name"
      :max-height="maxHeight"
      @selection-change="handleSelectionChange"
      @row-click="selTab"
      highlight-current-row
    >
      <el-table-column
        v-if="selection"
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        v-if="selectionOnly"
        label="选择"
        :width="50"
        align="center"
        fixed="left"
      >
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.checked"
            :label="scope.row"
            @change="selectOnlyChange(scope.row)"
            ><span></span
          ></el-checkbox>
        </template>
      </el-table-column>
      <slot></slot>

      <!-- <el-table-column
        v-if="!hideXH"
        label="序号"
        :width="50"
        align="center"
        fixed="left"
      >
        <template slot-scope="scope">
          {{ scope.$index + rows * (pageIndex - 1) + 1 }}
        </template></el-table-column
      > -->

      <el-table-column
        v-for="(item, i) in tableArr"
        :key="i"
        :prop="item.prop"
        :label="item.label"
        :width="item.width || ''"
        :align="item.align || 'center'"
        :style="item.style || {}"
        :fixed="item.fixed || false"
        :label-class-name="item.type"
      >
        <template slot-scope="scope">
          <div v-if="scope.row[item.prop] && item.type == 'img'">
            <img
              @click="item.key ? $emit(item.key, scope) : seeImgFn(imgUrl)"
              v-show="item.type == 'img' && scope.row[item.prop]"
              v-for="(imgUrl, ix) in scope.row[item.prop].split(',')"
              :key="ix + 'img'"
              :src="imgUrl"
              alt
              :style="{
                width: 60 / scope.row[item.prop].split(',').length + 'px',
                height: 60 / scope.row[item.prop].split(',').length + 'px',
                marginRight: '5px',
                marginBottom: '5px'
              }"
            />
          </div>

          <div v-if="item.type == 'img' && !scope.row[item.prop]">暂无图片</div>

          <div v-if="item.type == 'tip'">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row[item.prop]"
              placement="bottom-start"
            >
              <span>{{
                scope.row[item.prop] && scope.row[item.prop].length > 26
                  ? scope.row[item.prop].slice(0, 26) + '...'
                  : scope.row[item.prop]
              }}</span>
            </el-tooltip>
          </div>

          <div
            v-if="item.type == 'text' || !item.type"
            :style="item.style || {}"
          >
            {{ scope.row[item.prop] || '--' }}
          </div>
          <div v-if="item.type == 'fn'" v-html="item.newfn(scope.row)"></div>
          <div
            v-if="item.type == 'styleText'"
            :style="scope.row[item.prop].style || {}"
          >
            {{ scope.row[item.prop].label }}
          </div>
          <div v-if="item.type == 'timeTxt'">
            {{ scope.row[item.prop] | datefmt('YYYY-MM-DD HH:mm:ss') }}
          </div>
          <div v-if="item.type == 'date'">
            {{ scope.row[item.prop] | datefmt('YYYY-MM-DD') }}
          </div>
          <div v-if="item.type == 'input'">
            <el-input
              :disabled="disabled"
              v-model="scope.row[item.prop]"
            ></el-input>
          </div>
          <div v-if="item.type == 'time'">
            {{ scope.row[item.prop] ? formatDate(scope.row[item.prop]) : '--' }}
          </div>
          <div v-if="item.type == 'timeChange'">
            <el-date-picker
              v-model="scope.row[item.prop]"
              format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
              :type="item.timeType ? item.timeType : 'date'"
              :placeholder="item.placeholder || '请选择显示时间'"
              @change="timeschange"
              @blur="timesblur(item, scope.row)"
            />
          </div>
          <div v-if="item.type == 'html'" v-html="scope.row[item.prop]" />
          <div v-if="item.type == 'arrRole'">
            <span v-for="(itemIn, i) in item.loop" :key="i">
              <span
                v-for="(item, i) in scope.row[item.prop]"
                v-if="itemIn.permissionId == item"
                :key="i"
                style="margin-right: 10px"
                >{{ itemIn.name }}</span
              >
            </span>
          </div>
          <div
            v-if="item.type == 'btnArr'"
            class="btnArr"
            :style="{ textAlign: item.sonalign }"
          >
            <span
              v-for="(itemS, i) in scope.row[item.prop]"
              v-if="itemS.label"
              :key="i"
              class="tableBtn_box"
            >
              <template v-if="!itemS.hideBtn">
                <el-popconfirm
                  v-if="itemS.popoverTxt"
                  :confirm-button-text="itemS.trueTxt || '确定'"
                  :cancel-button-text="itemS.falseTxt || '取消'"
                  :icon="item.icon || ''"
                  :title="itemS.popoverTxt"
                  @cancel="handleHide(scope, itemS.falsekey, i)"
                  @confirm="handleEdit(scope, itemS.key, i)"
                >
                  <span
                    slot="reference"
                    :style="
                      itemS.style
                        ? itemS.style
                        : { marginLeft: itemS.left || '0px' }
                    "
                    :type="itemS.type || 'text'"
                    @click="handleShow(scope, itemS.key, i)"
                  >
                    {{ itemS.label }}
                  </span>
                </el-popconfirm>

                <span
                  v-if="!itemS.popoverTxt"
                  :style="
                    itemS.style
                      ? itemS.style
                      : { marginLeft: itemS.left || '0px' }
                  "
                  :type="itemS.type || 'text'"
                  @click="handleEdit(scope, itemS.key, i)"
                >
                  <i :class="item.icon || ''" style="margin-right: 3px" />
                  {{ itemS.label }}
                </span>
              </template>
            </span>
          </div>
        </template>
      </el-table-column>
      <slot name="tableEnd"></slot>
    </el-table>
    <div class="sbFlex">
      <div>
        <el-button
          :type="item.type"
          :size="item.size || 'small'"
          v-for="(item, i) in bottomBtnArr"
          :key="i"
          @click="allBtnChange(item)"
        >
          <i :class="item.icon || ''" style="margin-right: 3px"></i>
          {{ item.label }}
        </el-button>
      </div>
      <div class="pagination" v-if="pagination && total > 0">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          layout="total, sizes, prev, pager, next"
          :page-sizes="[10, 20, 30]"
          :total="total"
          :page-size="pageSize"
          :current-page="pageIndex"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
/*
写入字段  tableData
    字段描述
              prop：写入的字段名
              label：需要展示的名称
              align：对齐方式
              width：宽度
              style：自定义的style

写入字段  btnArr
    字段描述
              label：需要展示的名称
              key：点击的方式
              icon：当前展示的ICON
              popoverFlag：是否启用popover组件
              popoverTxt：popover提示文字
              style：自定义的style

*/
export default {
  name: 'tableList',
  props: {
    // 是否开启序号的展示
    hideXH: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 是否显示单个的选项
    selectionOnly: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 是否禁用当前列表内部的组件
    disabled: {
      type: [Boolean],
      default: () => {
        return false
      }
    },
    // 是否启用可变性按钮
    btnFlag: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    loading: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 表格的配置
    tableArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 写入的数据
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 是否开启筛选
    selection: {
      type: Boolean,
      default: false
    },
    // 按钮的配置
    btnArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 总条数
    total: {
      type: Number,
      default: 0
    },
    // 是否开启分页
    pagination: {
      type: Boolean,
      default: true
    },
    // 最大高度
    height: {
      type: [Number, String],
      default: ''
    },
    pageIndex: {
      type: [Number, String],
      default: 1
    },
    // 下左侧显示功能性
    bottomBtnArr: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      visible2: false,
      show: [],
      rowShow: [],
      collShow: [],
      rows: 20,
      rowsObj: [],
      maxHeight: ''
    }
  },
  watch: {},
  mounted () {
    this.maxHeight = this.height
      ? this.height
      : document.body.clientHeight * 0.7
  },
  methods: {
    // 默认选择的配置
    toggleSelection (rows) {
      this.$nextTick(function () {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row, true)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      })
    },
    // 单选的选择
    selectOnlyChange (row) {
      this.$emit('changeOnlyCheckbox', row)
    },
    // 行内时间选择改变
    timeschange (time) {
      console.log(time)
    },
    // 失焦释放局内参数
    timesblur (item, info) {
      let sortTime = info[item.prop]
      if (typeof sortTime === 'string') {
        var date = sortTime
        date = date.substring(0, 19)
        date = date.replace(/-/g, '/')
        var timestamp = new Date(date).getTime()
        sortTime = new Date(timestamp)
      }
      if (!sortTime) {
        sortTime = new Date()
      }
      info[item.prop] = this.formatDateFn(sortTime)
      this.$emit(item.key, info)
    },
    // 全局底部左侧多样式修改
    allBtnChange (item) {
      this.$confirm('是否确认进行' + item.label + '操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.$emit(item.key, null)
        })
        .catch(() => {})
    },
    // 更改的选择方法
    handleSelectionChange (val) {
      this.rowsObj = val.rows
      this.$emit('select', val)
    },
    // 点击更改页数的触发事件
    handleCurrentChange (val) {
      this.rows = val.rows
      this.$emit('change', val)
    },
    // 按钮的点击事件
    handleEdit (scope, key, i) {
      this.$emit(key || 'null', scope)
    },
    // 点击隐藏框
    handleHide (scope, key, i) {
      // this.$set(this.show, scope.$index, false);
      // this.$set(this.collShow, i, false);
      // this.$set(this.rowShow, i, false);
      this.$emit(key || 'null', scope)
    },

    // 点击出现框
    handleShow (scope, key, i) {
      this.$set(this.show, scope.$index, true)
      this.$set(this.rowShow || 'null', i, true)
    },
    formatDateFn (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      var h = date.getHours()
      var minute = date.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      var second = date.getSeconds()
      second = minute < 10 ? '0' + second : second
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
    },
    // 时间格式的转换
    formatDate (time) {
      try {
        const date = new Date(parseInt(time))
        const Y = date.getFullYear() + '-'
        const M =
          date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1) + '-'
            : date.getMonth() + 1 + '-'
        const D =
          date.getDate() < 10
            ? '0' + date.getDate() + ' '
            : date.getDate() + ' '
        const h =
          date.getHours() < 10
            ? '0' + date.getHours() + ':'
            : date.getHours() + ':'
        const m =
          date.getMinutes() < 10
            ? '0' + date.getMinutes() + ':'
            : date.getMinutes() + ':'
        const s =
          date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return Y + M + D + h + m + s
      } catch (err) {}
    },
    //
    selTab (row, event, column) {
      this.$emit('selTab', row)
    },
    // 触发选中事件
    setCurrentRow (row) {
      this.$refs.multipleTable.setCurrentRow(row)
    }
  }
}
</script>
<style lang="scss">
.el-table {
  font-size: 12px;
}
.tableBtn_box {
  display: inline-block;
  padding: 0px 17px;
  text-align: center;
}
.el-table .cell {
  padding: 0px;
}
.btnArr {
  .tableBtn_box {
    border-right: 1px solid #e8ecf2;
    cursor: pointer;
    color: #0a58bf;
    line-height: 13px;
    &:nth-last-child(1) {
      border: 0px;
    }
  }
}
.el-tooltip__popper {
  max-width: 500px;
  line-height: 180%;
}
.pagination {
  margin: 10px 0px;
}
.nullBox {
  min-height: 500px;
  .nullBox_in {
    width: 150px;
    flex-wrap: wrap;
  }
  .nullBox_in_img {
    width: 144px;
    height: 134px;
    margin-bottom: 10px;
  }
  .nullBox_in_bottm {
    color: #ccc;
  }
}
.header-row-class-name th {
  background: #fafafa !important;
}
</style>
